<template>
  <div class="playlist-detail">
    <van-nav-bar :title="isLike ? '我喜欢的音乐' : '歌单详情'" left-arrow @click-left="goBack" />
    <div class="cover-section">
      <img class="cover-img" :src="'https://img0.baidu.com/it/u=3674450988,2177791649&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'" alt="cover" />
      <div class="cover-info">
        <div class="playlist-title">{{ isLike ? '我喜欢的音乐' : '一程山路' }}</div>
        <div class="playlist-author">{{ isLike ? '林子艮' : '毛不易' }}</div>
        <div class="playlist-tags">
          <van-tag type="primary">{{ isLike ? '心动模式' : '流行' }}</van-tag>
          <van-tag v-if="isLike" type="success">225次播放</van-tag>
          <van-tag v-else type="success">治愈</van-tag>
        </div>
      </div>
    </div>
    <div class="playlist-desc">{{ isLike ? '你喜欢的音乐都在这里' : '一程山路，走不出 看不破' }}</div>
    <van-divider>歌曲列表</van-divider>
    <van-cell-group>
      <van-cell 
        v-for="song in songList" 
        :key="song.id" 
        :title="song.title" 
        :label="song.artist" 
        clickable
      >
        <template #right-icon>
          <van-icon name="ellipsis" class="more-icon" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, computed } from 'vue';
const router = useRouter();
const route = useRoute();
const goBack = () => {
  if (window.history.length > 1) {
    router.back();
  } else {
    router.push('/');
  }
};

const likeList = [
  { id: 1, title: '一程山路', artist: '毛不易' },
  { id: 2, title: '东北民谣', artist: '毛不易' },
  { id: 3, title: '像我这样的人', artist: '毛不易' },
  { id: 4, title: '平凡的一天', artist: '毛不易' },
  { id: 5, title: '消愁', artist: '毛不易' },
  { id: 6, title: '借', artist: '毛不易' },
  { id: 7, title: '盛夏', artist: '毛不易' },
  { id: 8, title: '二零三', artist: '毛不易' },
  { id: 9, title: '感觉自己是巨星', artist: '毛不易' },
  { id: 10, title: '如果有一天我变得很有钱', artist: '毛不易' },
  { id: 11, title: '巨星', artist: '毛不易' },
  { id: 12, title: '深夜一角', artist: '毛不易' },
  { id: 13, title: '等', artist: '毛不易' },
  { id: 14, title: '小王', artist: '毛不易' },
  { id: 15, title: '呓语', artist: '毛不易' }
]
const normalList = [
  { id: 1, title: '晴天', artist: '周杰伦' },
  { id: 2, title: '稻香', artist: '周杰伦' },
  { id: 3, title: '青花瓷', artist: '周杰伦' },
  { id: 4, title: '七里香', artist: '周杰伦' },
  { id: 5, title: '夜曲', artist: '周杰伦' },
  { id: 6, title: '发如雪', artist: '周杰伦' },
  { id: 7, title: '东风破', artist: '周杰伦' },
  { id: 8, title: '菊花台', artist: '周杰伦' },
  { id: 9, title: '千里之外', artist: '周杰伦' },
  { id: 10, title: '听妈妈的话', artist: '周杰伦' },
  { id: 11, title: '简单爱', artist: '周杰伦' },
  { id: 12, title: '龙卷风', artist: '周杰伦' },
  { id: 13, title: '星晴', artist: '周杰伦' },
  { id: 14, title: '可爱女人', artist: '周杰伦' },
  { id: 15, title: '黑色幽默', artist: '周杰伦' }
]
const isLike = computed(() => route.params.id === 'like')
const songList = computed(() => isLike.value ? likeList : normalList)
</script>

<style scoped>
.playlist-detail {
  background: var(--van-background-color, #fff);
  min-height: 100vh;
  color: var(--van-text-color, #222);
}
.cover-section {
  display: flex;
  align-items: center;
  padding: 20px 16px 10px 16px;
}
.cover-img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.cover-info {
  margin-left: 16px;
}
.playlist-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 8px;
}
.playlist-author {
  color: #888;
  margin-bottom: 8px;
}
.playlist-tags .van-tag {
  margin-right: 8px;
}
.playlist-desc {
  padding: 0 16px 10px 16px;
  color: #666;
}
.more-icon {
  font-size: 22px;
  color: #bdbdbd;
}
</style>